<!--
Copyright (c) 2018 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->

<!doctype html>
<html>

<head>
  <title>Google Codelab Step</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
    }
  </style>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Code+Pro'>
  <link rel="stylesheet" href="google_codelab_step_scss_bin.css">
</head>

<body>
  <google-codelab-step label="Using <google-map>" step="1" duration="10" on-google-codelab-step-copy="onCopy" active>

    <h3 class="checklist">What you'll learn</h3>
    <ul class="checklist">
      <li>How to start a new Polymer-based project using Chrome Dev Editor</li>
      <li>How to use elements in Polymer's iron, paper, and Google Web Component sets.</li>
      <li>How to use Polymer's data binding features to reduce boilerplate code.</li>
    </ul>

    <p>The
      <a href="https://elements.polymer-project.org/browse?package=google-web-components">Google Web Components</a> provide the
      <code>&lt;google-map&gt;</code> element for declaratively rendering a Google Map. To use it, you first need to install it using Bower.</p>
    <aside class="special">
      <p>
        <strong>What is Bower?</strong>
      </p>
      <p>
        <a href="http://bower.io/">Bower</a> is a client-side package management tool that can be used with any web app. When working with Polymer,
        it simplifies the hassles of dependency management. Every component defines its own set of dependencies. When you
        use Bower to install a component, the component's dependencies are installed alongside it under
        <code>bower_components/</code>.</p>
    </aside>

    <h2>Create a new project</h2>

    <aside class="special">
      <p>This codelab uses Chrome Dev Editor, a Chrome app IDE. If you don't have it installed yet, please install it from Chrome
        Web Store.</p>
      <p>
        <paper-button raised class="colored">
          <iron-icon icon="file-download"></iron-icon>
          <a href="https://chrome.google.com/webstore/detail/chrome-dev-editor-develop/pnoffddplpippgcfjdhbmhkofpnaalpg?hl=en">Download Chrome Dev Editor</a>
        </paper-button>
      </p>
    </aside>

    <p>The first time you run Chrome Dev Editor it will ask you to setup your workspace environment.</p>
    <p>Fire up Chrome Dev Editor and start a new project:</p>
    <ol start="1">
      <li>Click
        <img src="img-2.png" style="max-width: 27px">to start a new project.</li>
      <li>Enter
        <strong>"PolymerMapsCodelab"</strong>&#160;as the
        <strong>Project name</strong>.</li>
      <li>In the
        <strong>Project type</strong>&#160;dropdown, select "JavaScript web app (using Polymer paper elements)".</li>
      <li>Click the
        <strong>Create</strong>&#160;button.</li>
    </ol>
    <p>
      <img src="img-3.png" style="max-width: 343px">
    </p>
    <p>Chrome Dev Editor creates a basic scaffold for your Polymer app. In the background, it also uses
      <a href="http://bower.io/">Bower</a>&#160;to download and install a list of dependencies (including the Polymer core library) into the
      <code>bower_components</code>/ folder.
      <strong>Fetching the components make take some time if your internet connection is slow</strong>. You'll learn more about using
      Bower in the next step.</p>
    <h3>bower.json</h3>

    <pre><code><span class="typ">PolymerMapsCodelab</span><span class="pun">/</span><span class="pln">
        bower_components</span><span class="pun">/</span><span class="pln"> </span><span class="pun">&lt;!--</span><span class="pln"> installed dependencies </span><span class="kwd">from</span><span class="pln"> </span><span class="typ">Bower</span><span class="pln"> </span><span class="pun">--&gt;</span><span class="pln">
        bower</span><span class="pun">.</span><span class="pln">json  </span><span class="pun">&lt;!--</span><span class="pln"> </span><span class="typ">Bower</span><span class="pln"> metadata files used </span><span class="kwd">for</span><span class="pln"> managing deps </span><span class="pun">--&gt;</span><span class="pln">
        index</span><span class="pun">.</span><span class="pln">html  </span><span class="pun">&lt;!--</span><span class="pln"> your app </span><span class="pun">--&gt;</span><span class="pln">
        main</span><span class="pun">.</span><span class="pln">js
        styles</span><span class="pun">.</span><span class="pln">css</span></code></pre>

    <h2>Install the
      <google-map> element</h2>
    <p>Normally, you'd run
      <code>bower install GoogleWebComponents/google-map --save</code> on the command line to install
      <code>&lt;google-map&gt;</code> and save it as a dependency. However, Chrome Dev Editor does not have a command line for running Bower commands. Instead,
      you need to manually edit
      <code>bower.json</code> to include
      <code>google-map</code>, then run Chrome Dev Editor's
      <strong>Bower Update</strong> feature.
      <strong>Bower Update</strong> checks the dependencies in
      <code>bower.json</code> and installs any missing ones.</p>
    <ol start="1">
      <li>Edit
        <code>bower.json</code> and add
        <code>google-map</code> to the
        <code>dependencies</code> object:</li>
    </ol>

    <pre><code language="">"dependencies": {
"iron-elements": "PolymerElements/iron-elements#^1.0.0",
"paper-elements": "PolymerElements/paper-elements#^1.0.1",
"google-map": "GoogleWebComponents/google-map#^1.0.3"
}</code></pre>

    <ol start="2">
      <li>Right-click the
        <code>bower.json</code> filename in the editor.</li>
      <li>Select
        <strong>Bower Update</strong> from the context menu.</li>
    </ol>
    <p>
      <img src="img-6.png" style="max-width: 220px">
    </p>
    <p>The download may take few seconds. You can verify that
      <code>&lt;google-map&gt;</code> (and any dependencies) were installed by checking that
      <code>bower_components/google-map/</code> was created and populated.</p>
    <h2>Use the
      <google-map> element</h2>
    <p>To employ
      <code>&lt;google-map&gt;</code>, you need to:</p>
    <ol start="1">
      <li>Use an
        <a href="http://www.html5rocks.com/en/tutorials/webcomponents/imports/">HTML Import</a> to load it in
        <code>index.html</code>.</li>
      <li>Declare an instance of the element on the page.</li>
    </ol>
    <p>In
      <code>index.html</code>,
      <strong> remove all other HTML imports</strong>
      <strong>in the</strong>
      <code>&lt;head&gt;</code> and replace them with a single import that loads
      <code>google-map.html</code>:</p>
    <h3>
      <a href="https://github.com">index.html</a>
    </h3>

    <pre><code>&lt;head&gt;
....
&lt;script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"&gt;&lt;/script&gt;
&lt;link rel="import" href="bower_components/google-map/google-map.html"&gt;
&lt;/head&gt;</code></pre>

    <aside class="warning">
      <p>
        <strong>Important</strong>: all imports need to come
        <strong>after</strong>
        <code>webcomponents-lite.min.js</code> so the polyfill can properly load them.</p>
    </aside>
    <p>Next, replace the contents of
      <code>&lt;body&gt;</code> with an instance of
      <code>&lt;google-map&gt;</code>:</p>
    <h3>index.html</h3>

    <pre><code language="">&lt;body unresolved&gt;
&lt;google-map latitude="37.779" longitude="-122.3892" zoom="13"&gt;&lt;/google-map&gt;
&lt;/body&gt;</code></pre>

    <p>Here's a pre block without code:</p>
    <pre>$ node client.js list wdfasdf asdf asdf asdf asdf asdf asdf asdf asdf asdfa sdf asdfa sdf asdfa sdfasdfasdfasdf
{ books:
 [ { id: 123,
     title: 'A Tale of Two Cities',
     authors: 'Charles Dickens' } ] }</pre>

    <p>As you can see, using
      <code>&lt;google-map&gt;</code> is completely declarative! The map is centered using the
      <code>latitude</code> and
      <code>longitude</code> attributes and its zoom level is set by the
      <code>zoom</code> attribute.</p>
    <h3>Style the map</h3>
    <p>If you run the app right now, nothing will display. In order for the map to properly display itself, you need to set
      its container (in this case,
      <code>&lt;body&gt;</code>) to have a fixed height.</p>
    <p>Open
      <code>styles.css</code> and replace its contents with default styling:</p>
    <h3>styles.css</h3>

    <pre><code language="">body, html {
font-family: 'Roboto', Arial, sans-serif;
height: 100%;
margin: 0;
}</code></pre>

    <h3>Add a marker</h3>
    <p>
      <code>&lt;google-map&gt;</code> supports adding map markers to the map by declaring
      <code>&lt;google-map-marker&gt;</code> elements as children. The marker locations are also set using
      <code>latitude</code> and
      <code>longitude</code> attributes.</p>
    <p>Back in
      <strong>index.html</strong>, add a draggable
      <code>&lt;google-map-marker&gt;</code> to the map:</p>
    <h3>index.html</h3>

    <pre><code class="html">&lt;google-map latitude="37.779" longitude="-122.3892" zoom="13" disable-default-ui&gt;
&lt;google-map-marker latitude="37.779" longitude="-122.3892"
    title="Go Giants!" draggable="true"&gt;&lt;/google-map-marker&gt;
&lt;/google-map&gt;</code></pre>

    <p>Notice that we've also disabled the map's controls by setting
      <code>disableDefaultUi</code> to true. Since it's a boolean property, its presence as an HTML attribute makes it truthy.</p>
    <h2>Run the app</h2>
    <p>If you haven't already done so, hit the
      <img src="img-7.png" style="max-width: 29px"> button. At this point, you should see a map that takes up the entire viewport and has a single marker pin.</p>
    <p>
      <img src="img-8.png" style="max-width: 624px">
    </p>
    <h3 class="faq">Frequently Asked Questions</h3>
    <ul class="faq">
      <li>
        <a href="https://elements.polymer-project.org/elements/google-map">Where are the reference docs for &lt;google-map&gt; and &lt;google-map&gt;</a>?</li>
      <li>A link to
        <a href="https://stackoverflow.com">stackoverflow</a>.</li>
      <li>A link to
        <a href="https://github.com">github</a>.</li>
      <li>A link to
        <a href="https://developer.android.com">developer.android.com</a>.</li>
      <li>A link to
        <a href="https://support.google.com/webmasters/answer/35624#3">webmasters support</a>.</li>
    </ul>

    <google-codelab-survey survey-id="polymer-maps-1">
      <h4>How would rate your experience with Polymer?</h4>
      <paper-radio-group>
        <paper-radio-button>Novice</paper-radio-button>
        <paper-radio-button>Intermediate</paper-radio-button>
        <paper-radio-button>Advanced</paper-radio-button>
      </paper-radio-group>
    </google-codelab-survey>

  </google-codelab-step>




  <script src="/external/polyfill/src/native-shim.js"></script>
  <script src="/external/polyfill/custom-elements.min.js"></script>
  <script src="/external/prettify/src/prettify.js"></script>
  <script src="google_codelab_step_bin.js"></script>
</body>

</html>